<template>
  <div class="console">
    <!--数据卡片-->
    <div class="n-layout-page-header">
      <NCard :bordered="true"  style="margin-bottom: 2px;">
        <template #header>
          <n-gradient-text :size="24" type="primary">
            考勤日：{{ currentDate }}  
        </n-gradient-text>
        </template>

        <template #header-extra>
          <n-select v-model:value="value" :options="options" label="项目" size="small" style="margin-right: 5px;"/>
          <n-button size="small" type="primary" @click="showstatisticaldata()">阅览</n-button>
        </template>
      </NCard>
    </div>
    <n-grid cols="1 s:2 m:3 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12" :y-gap="8">
      <n-grid-item>
        <NCard
          title="管理人员"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <template #header-extra>
            <n-tag type="success" style="margin-right: 5px;">出勤</n-tag>
            <n-button size="small" type="primary" @click="showdtls(1)">
              <template #icon>
                <n-icon>
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none"><path d="M12 19.137A2.742 2.742 0 0 1 10 20H3.75A1.75 1.75 0 0 1 2 18.25V5.75C2 4.784 2.784 4 3.75 4H10c.788 0 1.499.331 2 .863A2.742 2.742 0 0 1 14 4h6.25c.966 0 1.75.784 1.75 1.75v12.5A1.75 1.75 0 0 1 20.25 20H14a2.742 2.742 0 0 1-2-.863zM3.5 5.75v12.5c0 .138.112.25.25.25H10c.69 0 1.25-.56 1.25-1.25V6.75c0-.69-.56-1.25-1.25-1.25H3.75a.25.25 0 0 0-.25.25zm9.25 11.5c0 .69.56 1.25 1.25 1.25h6.25a.25.25 0 0 0 .25-.25V5.75a.25.25 0 0 0-.25-.25H14c-.69 0-1.25.56-1.25 1.25v10.5z" fill="currentColor"></path></g></svg>
                </n-icon>
              </template>
              详细
            </n-button>
          </template>
          <div class="flex justify-between px-1 py-1">
          <n-row>
          <n-col :span="12">
            <n-statistic label="在场" >
              <n-skeleton v-if="loading" :width="100" size="medium" />
                  <CountTo v-else :startVal="1" :endVal="kinmuData.m_onsitecnt" suffix="人" class="text-3xl" />
            </n-statistic>
          </n-col>
          <n-col :span="12">
            <n-statistic label="未在场">
              <n-skeleton v-if="loading" :width="100" size="medium" />
                  <CountTo v-else :startVal="1" :endVal="kinmuData.m_unsitecnt" suffix="人" class="text-3xl" />
            </n-statistic>
          </n-col>
          </n-row>
          </div>
          <div class="flex justify-between px-2 py-2">
            <div class="flex-1 text-sn">
              <n-progress
                type="line"
                status="success"
                :percentage="kinmuData.m_onsitecnt_degree"
                :indicator-placement="'inside'"
                processing
              />
            </div>
          </div>
          <template #footer>
            <div class="flex justify-between">
              <n-skeleton v-if="loading" text :repeat="2" />
              <template v-else>
                <div class="text-sn"> 总人数： </div>
                <div class="text-sn">
                  <CountTo :startVal="1" :endVal="kinmuData.managercnt"  suffix="人"/>
                </div>
              </template>
            </div>
          </template>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="管理人员"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <template #header-extra>
            <n-tag type="error" style="margin-right: 5px;">缺勤</n-tag>
            <n-button size="small" type="primary" @click="showdtls(2)">
              <template #icon>
                <n-icon>
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none"><path d="M12 19.137A2.742 2.742 0 0 1 10 20H3.75A1.75 1.75 0 0 1 2 18.25V5.75C2 4.784 2.784 4 3.75 4H10c.788 0 1.499.331 2 .863A2.742 2.742 0 0 1 14 4h6.25c.966 0 1.75.784 1.75 1.75v12.5A1.75 1.75 0 0 1 20.25 20H14a2.742 2.742 0 0 1-2-.863zM3.5 5.75v12.5c0 .138.112.25.25.25H10c.69 0 1.25-.56 1.25-1.25V6.75c0-.69-.56-1.25-1.25-1.25H3.75a.25.25 0 0 0-.25.25zm9.25 11.5c0 .69.56 1.25 1.25 1.25h6.25a.25.25 0 0 0 .25-.25V5.75a.25.25 0 0 0-.25-.25H14c-.69 0-1.25.56-1.25 1.25v10.5z" fill="currentColor"></path></g></svg>
              </n-icon>
              </template>
              详细
            </n-button>
          </template>
          <div class="flex justify-between px-1 py-1">
          <n-row>
          <n-col :span="24">
            <n-statistic label="未签到" >
              <n-skeleton v-if="loading" :width="100" size="medium" />
            <n-gradient-text type="error" v-else><CountTo
              suffix="人"
              :startVal="1"
              :endVal="kinmuData.m_nocheckincnt"
              class="text-3xl"
            />
            </n-gradient-text>
            </n-statistic>
          </n-col>
          </n-row>
          </div>
          <div class="flex justify-between px-2 py-2">
            <div class="flex-1 text-sn">
              <n-progress
                type="line"
                status="error"
                :percentage="kinmuData.m_unsitecnt_degree"
                :indicator-placement="'inside'"
                processing
              />
            </div>
          </div>
          <template #footer>
            <div class="flex justify-between">
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <template v-else>
                <div class="text-sn"> 总人数： </div>
                <div class="text-sn">
                  <CountTo suffix="人" :startVal="1" :endVal="kinmuData.managercnt" />
                </div>
              </template>
            </div>
          </template>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="工人"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <template #header-extra>
            <n-tag type="success" style="margin-right: 5px;">出勤</n-tag>
            <n-button size="small" type="primary" @click="showdtls(3)">
              <template #icon>
                <n-icon>
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none"><path d="M12 19.137A2.742 2.742 0 0 1 10 20H3.75A1.75 1.75 0 0 1 2 18.25V5.75C2 4.784 2.784 4 3.75 4H10c.788 0 1.499.331 2 .863A2.742 2.742 0 0 1 14 4h6.25c.966 0 1.75.784 1.75 1.75v12.5A1.75 1.75 0 0 1 20.25 20H14a2.742 2.742 0 0 1-2-.863zM3.5 5.75v12.5c0 .138.112.25.25.25H10c.69 0 1.25-.56 1.25-1.25V6.75c0-.69-.56-1.25-1.25-1.25H3.75a.25.25 0 0 0-.25.25zm9.25 11.5c0 .69.56 1.25 1.25 1.25h6.25a.25.25 0 0 0 .25-.25V5.75a.25.25 0 0 0-.25-.25H14c-.69 0-1.25.56-1.25 1.25v10.5z" fill="currentColor"></path></g></svg>
              </n-icon>
              </template>
              详细
            </n-button>
          </template>
          <div class="flex justify-between px-1 py-1">
            <n-row>
          <n-col :span="12">
            <n-statistic label="在场" >
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <CountTo v-else :startVal="1" :endVal="kinmuData.w_onsitecnt" suffix="人" class="text-3xl" />
            </n-statistic>
          </n-col>
          <n-col :span="12">
            <n-statistic label="未在场">
              <n-skeleton v-if="loading" :width="100" size="medium" />
                  <CountTo v-else :startVal="1" :endVal="kinmuData.w_unsitecnt" suffix="人" class="text-3xl" />
            </n-statistic>
          </n-col>
          </n-row>
          </div>
          <div class="flex justify-between px-2 py-2">
            <div class="flex-1 text-sn">
              <n-progress
                type="line"
                status="success"
                :percentage="kinmuData.w_onsitecnt_degree"
                :indicator-placement="'inside'"
                processing
              />
            </div>
          </div>
          <template #footer>
            <div class="flex justify-between">
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <template v-else>
                <div class="text-sn"> 总人数： </div>
                <div class="text-sn">
                  <CountTo :startVal="1" suffix="人" :endVal="kinmuData.workercnt" />
                </div>
              </template>
            </div>
          </template>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="工人"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <template #header-extra>
            <n-tag type="error" style="margin-right: 5px;">缺勤</n-tag>
            <n-button size="small" type="primary" @click="showdtls(4)">
              <template #icon>
                <n-icon>
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none"><path d="M12 19.137A2.742 2.742 0 0 1 10 20H3.75A1.75 1.75 0 0 1 2 18.25V5.75C2 4.784 2.784 4 3.75 4H10c.788 0 1.499.331 2 .863A2.742 2.742 0 0 1 14 4h6.25c.966 0 1.75.784 1.75 1.75v12.5A1.75 1.75 0 0 1 20.25 20H14a2.742 2.742 0 0 1-2-.863zM3.5 5.75v12.5c0 .138.112.25.25.25H10c.69 0 1.25-.56 1.25-1.25V6.75c0-.69-.56-1.25-1.25-1.25H3.75a.25.25 0 0 0-.25.25zm9.25 11.5c0 .69.56 1.25 1.25 1.25h6.25a.25.25 0 0 0 .25-.25V5.75a.25.25 0 0 0-.25-.25H14c-.69 0-1.25.56-1.25 1.25v10.5z" fill="currentColor"></path></g></svg>
              </n-icon>
              </template>
              详细
            </n-button>
          </template>
          <div class="flex justify-between px-1 py-1">
          <n-row>
          <n-col :span="24">
            <n-statistic label="未签到" >
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <n-gradient-text type="error" v-else><CountTo suffix="人" :startVal="1" :endVal="kinmuData.w_nocheckincnt" class="text-3xl" /></n-gradient-text>
            </n-statistic>
          </n-col>
          </n-row>
          </div>
          <div class="flex justify-between px-2 py-2">
            <div class="flex-1 text-sn">
              <n-progress
                type="line"
                status="error"
                :percentage="kinmuData.w_unsitecnt_degree"
                :indicator-placement="'inside'"
                processing
              />
            </div>
          </div>
          <template #footer>
            <div class="flex justify-between">
              <n-skeleton v-if="loading" :width="100" size="medium" />
              <template v-else>
                <div class="text-sn"> 总人数： </div>
                <div class="text-sn">
                  <CountTo suffix="人" :startVal="1" :endVal="kinmuData.workercnt" />
                </div>
              </template>
            </div>
          </template>
        </NCard>
      </n-grid-item>
    </n-grid>

    <!--访问量 | 流量趋势-->
    <VisiTab />

    <n-drawer v-model:show="showdrawer" :width="1200">
    <n-drawer-content :title="titledrawer" closable>
      <n-card :bordered="false" class="mt-4 proCard">
      <BasicTable
        :columns="columns"
        :request="loadDataTable"
        :row-key="(row) => row.id"
        :pagination="false"
        ref="actionRef"
        @update:checked-row-keys="onCheckedRow"
      >
        <template #tableTitle>
          <n-button type="primary" @click="downloadcsv">
            导出考勤CSV
          </n-button>
        </template>
        <template #toolbar>
          <n-button type="primary" @click="reloadTable">刷新数据</n-button>
        </template>
      </BasicTable>
    </n-card>
    </n-drawer-content>
  </n-drawer>

  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  import { getConsoleInfo,getProject,getKinmulist,getKinmucsv } from '@/api/dashboard/console';
  import VisiTab from './components/VisiTab.vue';
  import { CountTo } from '@/components/CountTo/index';
  import { BasicTable } from '@/components/Table';

  interface InkinmuData {
    staffsize: number;
    indays: string;
    managercnt: number;
    workercnt: number;
    m_onsitecnt: number;
    w_onsitecnt: number;
    m_unsitecnt: number;
    w_unsitecnt: number;
    m_nocheckincnt: number;
    w_nocheckincnt: number;
    m_onsitecnt_degree: number;
    w_onsitecnt_degree: number;
    m_unsitecnt_degree: number;
    w_unsitecnt_degree: number;
  }

  const loading = ref(true);
  const kinmuData = ref({} as InkinmuData);

  const showdrawer = ref(false);
  const titledrawer = ref('');
  const currentDate = ref('');
  const actionRef = ref();
  const value = ref('');
  const options = ref();
  const columns =  [
    {
      title: '姓名',
      key: 'name',
    },
    {
      title: '性别',
      key: 'gender',
    },
    {
      title: '项目',
      key: 'project',
    },
    {
      title: '班组',
      key: 'group',
    },
    {
      title: '角色',
      key: 'role',
    },
    {
      title: '入场时刻',
      key: 'intime',
    },
    {
      title: '出场时刻',
      key: 'outtime',
    },
    {
      title: '实际工作时间',
      key: 'worktime',
    },
    {
      title: '勤务状况',
      key: 'notes',
    },
  ];

  async function getcsvdata() {
    if (titledrawer.value == '管理人员出勤情况（考勤日：' + currentDate.value + '）') {
      const data = await getKinmucsv({kubun:1});
      return data;
    }
    if (titledrawer.value == '管理人员缺勤情况（考勤日：' + currentDate.value + '）') {
      const data = await getKinmucsv({kubun:2});
      return data;
    }
    if (titledrawer.value == '工人出勤情况（考勤日：' + currentDate.value + '）') {
      const data = await getKinmucsv({kubun:3});
      return data;
    }
    if (titledrawer.value == '工人缺勤情况（考勤日：' + currentDate.value + '）') {
      const data = await getKinmucsv({kubun:4});
      return data;
    }
  }

  function downloadcsv() {
    getcsvdata().then((value) => {
      const blob = new Blob([value], { type: 'text/csv;charset=utf-8;' });
      const url = URL.createObjectURL(blob);
      const fileName = titledrawer.value + '.csv';
      let a = document.createElement('a');
      a.download = fileName;
      a.href = url;
      document.body.append(a);
      a.click();
      URL.revokeObjectURL(a.href);
      a.remove();
    });
  }

  function reloadTable() {
    actionRef.value.reload();
  }

  function onCheckedRow(rowKeys: any[]) {
    console.log(rowKeys);
  }

  async function showstatisticaldata() {
    const data = await getConsoleInfo({project:value.value});
    kinmuData.value = data;
  }
  
  const loadDataTable = ref();

  function showdtls(val:any) {
    if (val == 1) {
      showdrawer.value = true;
      titledrawer.value = '管理人员出勤情况（考勤日：' + currentDate.value + '）';
      loadDataTable.value = async () => {
        const data = await getKinmulist({kubun:val});
        return data;
      };
    }
    if (val == 2) {
      showdrawer.value = true;
      titledrawer.value = '管理人员缺勤情况（考勤日：' + currentDate.value + '）';
      loadDataTable.value = async () => {
        const data = await getKinmulist({kubun:val});
        return data;
      };
    }
    if (val == 3) {
      showdrawer.value = true;
      titledrawer.value = '工人出勤情况（考勤日：' + currentDate.value + '）';
      loadDataTable.value = async () => {
        const data = await getKinmulist({kubun:val});
        return data;
      };
    }
    if (val == 4) {
      showdrawer.value = true;
      titledrawer.value = '工人缺勤情况（考勤日：' + currentDate.value + '）';
      loadDataTable.value = async () => {
        const data = await getKinmulist({kubun:val});
        return data;
      };
    }
  }
  
  const intervalId = ref();
  const getconsoleinfo = async () => {
    const data = await getConsoleInfo({project:value.value});
    kinmuData.value = data;
   };

  onMounted(async () => {
    getconsoleinfo();
    intervalId.value = setInterval(() => {
      getconsoleinfo();
    }, 30000);
    loading.value = false;
    const pdata = await getProject({project:''});
    options.value = pdata;
    value.value = pdata[0].value;
    const now = new Date();
    currentDate.value = now.toLocaleDateString().split('/')[0] + '年' + now.toLocaleDateString().split('/')[1] + '月' + now.toLocaleDateString().split('/')[2] + '日';

  });

  onUnmounted(() => {
      if (intervalId.value) {
        clearInterval(intervalId.value);
      }
  });
</script>

<style lang="less" scoped></style>
